@charset "UTF-8";
.compare {
  border-top: 1px solid #e3e6e9;
  background-color: #fbfbfb;
  padding: 80px 0 120px;
  &_main {
    padding-top: 50px;
    background-color: #fff;
  }
  &_box {
    width: 980px;
    margin: 70px auto 0;
    border-radius: 6px;
    // border: 1px solid red;
    box-shadow: 0 0 25px #e3e6e9;
    overflow: hidden;
  }
  &_desc {
    float: left;
  }
  &_select {
    overflow: hidden;
    li {
      float: left;
      color: #ccc;
      background-color: #fbfbfd;
      width: 245px;
      font-size: 14px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      cursor: pointer;
      border-bottom: 1px solid #e3e6e9;
      box-sizing: border-box;
      &:nth-child(1) {
        &.current {border-left: none;}
      }
      &:nth-child(4) {
        &.current {border-right: none;}
      }
      &.current {
        background-color: #fff;
        border-top: 2px solid #6190e8;
        border-left: 1px solid #e3e6e9;
        border-right: 1px solid #e3e6e9;
        border-bottom: none;
        color: #2C405A;
        span {
          position: relative;
          top: -2px;
          &::before {
            filter: none;
            opacity: 1;
          }
        }
      }
      span {
        display: inline-block;
        width: 100%;
        height: 100%;
        &::before {
          content: '';
          width: 30px;
          height: 30px;
          display: inline-block;
          background-repeat: no-repeat;
          background-size: 100% auto;
          position: relative;
          top: 8px;
          margin-right: 5px;
          background-position: center;
          filter: grayscale(100%);
          opacity: 0.6;
        }
      }
    }
    // overflow: hidden;
    // margin-top: 20px;
    // margin-bottom: 20px;
    // padding-right: 50px;
    // float: right;
    // li {
    //   font-size: 14px;
    //   float: left;
    //   cursor: pointer;
    //
    //   &::before {
    //     height: 2px;
    //     width: 100%;
    //     content: '';
    //     display: inline-block;
    //     background-color: rgba(36, 40, 54, 0.2);
    //   }
    //   &.current {
    //     &::before {
    //       background-color: #4573de;
    //     }
    //   }
    //   span {
    //     padding: 5px 10px;
    //   }
    // }
  }
  &_js {
    &::before {
      background-image: url('../../static/images/icons/icon_js.png');
    }
  }
  &_mu {
    &::before {
      background-image: url('../../static/images/icons/icon_memory.png');
    }
  }
  &_ui {
    &::before {
      background-image: url('../../static/images/icons/icon_ui.png');
    }
  }
  &_db {
    &::before {
      background-image: url('../../static/images/icons/icon_database.png');
      background-size: 95% !important;
    }
  }
}
